<template>
  <!-- Form -->
  <!--  <el-button text @click="dialogFormVisible = true">
    我的信息
  </el-button> -->
  <el-dialog title="我的信息" style="width:600px;">
    <el-form :model="form">
      <div style="left:270px;top:-30px">
        <Space size="large" wrap @click="edit_avatar">
          <el-tooltip content="点击修改" hide-after="10" effect="customized" placement="right">
            <Avatar :src="user.userInfo.avatar" size="large">
            </Avatar>
          </el-tooltip>
          <!--   <el-icon :size="25" style="top: 5px;left: -10px;" @click="edit_avatar">
            <Edit />
          </el-icon> -->
        </Space>
      </div>
      <el-form-item label="昵称" :label-width="formLabelWidth">
        <el-input v-model="form.name" placeholder="设置昵称" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱" :label-width="formLabelWidth">
        <el-input v-model="form.email" readonly="false" disabled="true" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input type="password" v-model="form.password" disabled="true" autocomplete="off" />
        <el-icon style="left: 10px;" :size="20" @click="edit_pwd">
          <Edit />
        </el-icon>
      </el-form-item>
    </el-form>
    <Space direction="vertical" style="left:250px;">
      <Button @click="save">保存</Button>
    </Space>
    <!-- 修改头像 -->
    <editAvatar v-model="editAvatar_visible"></editAvatar>
    <!-- 修改密码 -->
    <editPwd v-model="editPwd_visible"></editPwd>
  </el-dialog>


</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import userCount from '../../stores/userCount.js'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import editAvatar from '../Form/editAvatar.vue'
import editPwd from '../Form/editPwd.vue'
const formLabelWidth = '140px'
let user = userCount()

let editAvatar_visible = ref(false)
let editPwd_visible = ref(false)
const form = reactive({
  name: user.userInfo.nickname,
  email: user.userInfo.email,
  password: user.userInfo.pwd,
  avatar: user.userInfo.avatar,
  delivery: false,
})

const save = () => {
  axios.put('http://8.130.43.203:8080/user/nickname', { "email": user.userInfo.email, "nickname": form.name }).then(resp => {
    user.userInfo.nickname = resp.data
  })
  ElMessage({
    message: '修改成功',
    type: 'success',
  })
}


let infovisible = ref(false)
/* 点击修改头像 */
const edit_avatar = () => {
  editAvatar_visible.value = true
}
const edit_pwd = () => {
  editPwd_visible.value = true
  console.log(editPwd_visible.value);

  console.log("change_pwd");

}
</script>
<style scoped>
.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.avatar-uploader .avatar {
  width: 60px;
  height: 60px;
  display: block;
}
</style>


<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 60px;
  height: 60px;
  text-align: center;
}

.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
</style>